<template>
  <div class="clubPage">
    <div class="searchBox bgfff">
      <div class="tabsBox">
        <el-tabs v-model="type" @tab-click="handleClick">
          <el-tab-pane label="预约申请审核" name="1"></el-tab-pane>
          <el-tab-pane label="场馆管理" name="2"></el-tab-pane>
        </el-tabs>
        <div class="addBtns" v-if="type == 2">
          <el-button
            type="primary"
            size="mini"
            @click="
              () => {
                venueInfo = {};
                addVenueShow = true;
              }
            "
            >新增</el-button
          >
        </div>
      </div>
      <el-form
        :inline="true"
        :model="form"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="场馆名称：" prop="venue_name">
              <el-input
                v-model="form.venue_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="type == 1">
            <el-form-item label="预约人姓名：" prop="user_name">
              <el-input
                v-model="form.user_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="场馆类型：" prop="venue_type">
              <el-select v-model="form.venue_type" placeholder="场馆类型">
                <el-option label="全部" :value="0"></el-option>
                <el-option label="会议室" :value="1"></el-option>
                <el-option label="活动室" :value="2"></el-option>
                <el-option label="演艺厅" :value="3"></el-option>
                <el-option label="服务中心" :value="4"></el-option>
                <el-option label="其他" :value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="type == 1">
            <el-form-item label="审核状态：" prop="status">
              <el-select v-model="form.status" placeholder="审核状态">
                <el-option label="全部" :value="0"></el-option>
                <el-option label="未审核" :value="10"></el-option>
                <el-option label="已通过" :value="20"></el-option>
                <el-option label="未通过" :value="30"></el-option>
                <el-option label="已取消" :value="40"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="type == 2">
            <el-form-item label="上下架状态：" prop="status">
              <el-select v-model="form.status" placeholder="上下架状态">
                <el-option label="全部" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
                <el-option label="下架" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          style="
            display: flex;
            justify-content: flex-end;
            padding-right: 20px;
            margin: 20px 0;
          "
        >
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit"
              >查询</el-button
            >
            <el-button @click="resetForm('formRef')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff" v-if="type == 1">
      <div class="tablesCardTop">
        <div class="totalTxt">预约记录:{{ total }}</div>
      </div>
      <el-table
        v-if="type == 1"
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="venue_name" label="场馆名称" align="center">
        </el-table-column>
        <el-table-column
          prop="review_date"
          label="预约时段"
          align="center"
          width="280"
        >
          <template slot-scope="scope">
            {{ scope.row.start_date + "~" + scope.row.end_date }}
          </template>
        </el-table-column>
        <el-table-column prop="user_name" label="预约人姓名" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center" />
        <el-table-column prop="" label="场馆类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.venue_type | typeFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="所需积分" align="center" />
        <el-table-column prop="remark" label="用途备注" align="center">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.remark" placement="top">
              <div
                style="
                  overflow: hidden;
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  white-space: normal;
                "
              >
                {{ scope.row.remark }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="status_text"
          label="审核状态"
          align="center"
          width="90"
        />
        <el-table-column prop="create_time" label="提交时间" align="center" />

        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <div class="" v-if="scope.row.status_text == '未审核'">
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认通过？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(1, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="primary" slot="reference">通过</el-link>
              </el-popover>
              <el-divider direction="vertical"></el-divider>
              <el-link type="danger" @click="onBtns(2, scope.row)"
                >拒绝</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        :data="tableData"
        border
        size="small"
        style="width: 100%"
      >
        <!-- height="580" -->
        <el-table-column prop="_code" label="序号" align="center" width="80">
        </el-table-column>
        <el-table-column prop="name" label="申请时间" align="center" />
        <el-table-column prop="name" label="申请社团" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="社长姓名" align="center" />
        <el-table-column prop="userName" label="申请人" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />

        <el-table-column prop="" label="所在小区" align="center" />
        <el-table-column prop="" label="居民房屋" align="center" />
        <el-table-column prop="" label="审核状态" align="center" />
        <el-table-column prop="" label="审核人" align="center" />
        <el-table-column
          fixed="right"
          prop=""
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="operateBtns">
              <el-link type="primary" @click="onBtns(4, scope.row)"
                >审核</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <venueManage
      v-else
      :form="form"
      ref="venueManageRef"
      @openaddVenue="openaddVenue"
    >
    </venueManage>
    <!-- 拒绝 -->
    <el-dialog
      title="提示"
      width="480px"
      top="300px"
      :visible.sync="refuseShow"
      :before-close="
        () => {
          refuseShow = false;
        }
      "
    >
      <div class="checkdialogBody">
        <el-form
          :model="form2"
          ref="refuseForm"
          class="demo-form-inline"
          size="small"
          label-width="95px"
        >
          <el-form-item
            label="审核意见："
            prop="review_content"
            :rules="{
              required: true,
              message: '请填写审核意见',
              trigger: 'blur',
            }"
          >
            <el-input
              style=""
              type="textarea"
              v-model="form2.review_content"
              :autosize="{ minRows: 4 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="refuseShow = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onRefuse('refuseForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <addVenue
      v-if="addVenueShow"
      @handleClose="addVenueClose"
      :dialogVisible="addVenueShow"
      :venueInfo="venueInfo"
    ></addVenue>
  </div>
</template>

<script>
import { venueApply, auditVenue } from "@/api/venue.js";
import venueManage from "./venueManage.vue";
import addVenue from "./common/addVenue.vue";
export default {
  name: "",
  props: [""],
  filters: {
    typeFormat(val) {
      let obj = {
        1: "会议室",
        2: "活动室",
        3: "演艺厅",
        4: "服务中心",
        5: "其他",
      };
      return obj[val];
    },
  },
  data() {
    return {
      type: "1",
      form: {
        venue_name: "",
        user_name: "",
        venue_type: "",
        status: "",
        type: "",
        name: "",
        page: 1,
        limit: 10,
      },
      tableData: [{}],
      total: 0,
      projectId: "",
      checkShow: false,
      radio: 1,
      form2: {
        review_content: "",
      },
      addVenueShow: false,
      venueInfo: {
        id: 0,
      },
      refuseShow: false,
    };
  },

  components: { venueManage, addVenue },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      if (this.type == 1) {
        this.getList();
      } else {
        this.$refs.venueManageRef.getList();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (this.type == 1) {
        this.getList();
      } else {
        this.$refs.venueManageRef.getList();
      }
    },
    getList() {
      venueApply(this.form).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      this.venueInfo = info;
      if (val == 1) {
        //通过
        auditVenue({
          id: this.venueInfo.id,
          status: 20,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("审核成功");
            this.getList();
          }
        });
        this.$refs[`popover-${info.id}`].doClose();
      } else if (val == 2) {
        //拒绝
        this.refuseShow = true;
        this.addClubShow = true;
      } else if (val == 3) {
        //删除
        this.$refs[`popover-${info.id}`].doClose();
        delClub({ id: info.id }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          }
        });
      } else if (val == 4) {
        //审核
        this.checkShow = true;
      }
    },

    handleClick() {
      this.form.page = 1;
      this.form.status = "";
      if (this.type == 1) {
        this.getList();
      }
    },
    onRefuse(formName) {
      //拒绝
      this.$refs[formName].validate((valid) => {
        console.log(valid, "valid---");
        if (valid) {
          auditVenue({
            id: this.venueInfo.id,
            status: 30,
            review_content: this.form2.review_content,
          }).then((res) => {
            if (res.code == 200) {
              this.form2.review_content = "";
              this.refuseShow = false;
              this.$message.success("审核成功");
              this.getList();
            }
          });
        } else {
          this.form2.review_content = "";
        }
      });
    },
    addVenueClose(val) {
      this.addVenueShow = false;
      // console.log(this.$refs.venueManageRef.getList());
      if (val) {
        this.$refs.venueManageRef.getList();
      }
    },
    openaddVenue(val) {
      this.venueInfo = val;
      this.addVenueShow = true;
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.clubPage {
  .searchBox {
    position: relative;
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    .tabsBox {
      margin: 10px 0 20px;
      .el-tabs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-tabs__nav-wrap::after {
          background-color: rgba(0, 0, 0, 0);
        }
      }
    }
    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 300px;
      }
    }
    .addBtns {
      position: absolute;
      top: 15px;
      right: 24px;
    }
  }
  .tablesCard {
  }
}
</style>
